<template>
  <div id="headers">
    <div class="header_left">
      <div class="header_img">
        <img src="https://dus-company-log-img.oss-cn-beijing.aliyuncs.com/1/1675848049418logo.png" alt="" style="width:4rem; align-items: center;">
        <span style="font-size: 1.45rem; font-weight:bolder; margin-left: 1rem;"> 渡石医药</span>
      </div>
    </div>
    <div class="header_right">
      <div style="display: flex;">
        <div style="margin-right: 1rem; line-height: 5.2rem;">
          <span class="iconfont icon-zhongyingqiehuan-qiehuanyingwen" style="font-size:1.7rem;color: #7f8083;" @click="switchover()"></span>
        </div>
        <div  style="">
          <van-icon name="wap-nav" @click="showPopup" style="font-size: 1.9rem;"/>
        </div>
      </div>
     
      <van-popup v-model:show="show" :style="{ height: '100%',  width: '60%' ,}  " position="right">
        <div class="header_collapse">
          <van-collapse v-model="activeNames" class="collapse_itme">
            <van-collapse-item name="1" title="首页" class="van-icon-arrow_1" readonly @click="RouteJump(1)">
              <template #title>
                <div>
                  首页
                </div>
              </template>
              <template #right-icon>
                <van-icon name="cross" class="icon-name" @click.stop="onClose" />
              </template>
            </van-collapse-item>
            <van-collapse-item title="服务领域" name="2">
              <ul>
                <li class="collapse_li" @click="RouteJump(2)">主服务</li>
                <li class="collapse_li " style="border-bottom:none" @click="RouteJump(3)">增值服务</li>
              </ul>
            </van-collapse-item>
            <van-collapse-item title="服务支持" name="3">
              <ul>
                <li class="collapse_li" @click="RouteJump(4)">单号查询</li>
                <li class="collapse_li " style="border-bottom:none" @click="RouteJump(5)">常见问题</li>
              </ul>
            </van-collapse-item>
            <van-collapse-item title="关于我们" name="4">
              <ul>
                <li class="collapse_li" @click="RouteJump(6)">企业概况</li>
                <li class="collapse_li" @click="RouteJump(7)">企业荣誉</li>
                <li class="collapse_li " @click="RouteJump(8)" style="border-bottom:none">发展历程</li>
              </ul>
            </van-collapse-item>
            <van-collapse-item title="加入我们" name="5">
              <ul>
                <li class="collapse_li" @click="RouteJump(9)">社会招聘</li>
                <li class="collapse_li " @click="RouteJump(10)" style="border-bottom:none">联系方式</li>
              </ul>
            </van-collapse-item>
          </van-collapse>

        </div>

      </van-popup>
    </div>
  </div>
</template>
<script>
import { ref } from 'vue';
export default {
  name: "headers",
  setup() {
    const show = ref(false)
    const activeNames = ref(['1']);
    return {
      show,
      activeNames
    }
  },
  methods: {
    showPopup() {
      this.show = true
    },
    // 关闭菜单栏
    onClose() {
      this.show = false
    },
    RouteJump(value) {
      switch (value) {
        case 1:
          this.$router.push({ path: "/" })
          this.onClose()
          break;
        case 2:
          this.$router.push({ path: "/primaryService" })
          this.onClose()
          break;
        case 3:
          this.$router.push({ path: "/AddServices" })
          this.onClose()
          break;
        case 4:
          this.$router.push({ path: "/ServiceSupport" })
          this.onClose()
          break;
        case 5:
          this.$router.push({ path: "/Question" })
          this.onClose()
          break;
        case 6:
          this.$router.push({ path: "/CommpanyProgile" })
          this.onClose()
          break;
        case 7:
          this.$router.push({ path: "/CommpanyHonor" })
          this.onClose()
          break;
        case 8:
          this.$router.push({ path: "/developHisory" })
          this.onClose()
          break;
        case 9:
          this.$router.push({ path: "/handsWanted" })
          this.onClose()
          break;
        case 10:
          this.$router.push({ path: "/contactWay" })
          this.onClose()
          break;
      }
    },
    switchover(){
      window.location.href = 'https://en.dushisc.com/'
    }
  }

}
</script>
<style scoped >
#headers {
  height: 5.6rem;
  line-height: 5.6rem;
  padding: 0 1.5rem;
  display: flex;
  justify-content: space-between;
}
#header .header_left {
  display: flex;
  line-height: 5.6rem;
}
.header_img {
  display: flex;
  align-items: center;
  padding: 0rem 0.5rem 0rem 0rem;
}

.header_collapse {
  width: 100%;
  height: 100%;
  background: #3b3b3b;
}
.header_collapse /deep/ .van-collapse-item__content {
  background: none;
}
.collapse_itme /deep/.van-cell {
  padding: 1.5rem 1rem 1.5rem 1rem;
  font-size: 1.5rem;
  background: #222222;
  color: #ffffff;
}
.van-icon-arrow_1 /deep/.van-collapse-item__wrapper {
  display: none;
}
.collapse_li {
  line-height: 3rem;
  font-size: 1.4rem;
  font-weight: bolder;
  background: #3b3b3b;
  border-bottom: 0.1rem solid #d2d2d2;
}
.header_right{
  display: flex;
  align-items: center;
}
</style>